<template>
	<div class="app-mob-view-toolbar mob-toolbar-bottom">
		<template v-for="item in items" :key="item.name">
			<ToolbarItem
				v-if="item.itemType != 'ITEMS'"
				:item="item"
				@item-click="handleToolbarItemClick"
			/>
			<template v-else>
				<template v-if="item.showCaption">
					<ToolbarItem :item="item" @click="openToolbarUp" />
				</template>
				<van-popup
					v-model:show="show"
					class="app-mob-toolbar-bottom-popup"
					position="bottom"
					teleport="#app"
					round
				>
					<ToolbarGroups
						:items="item.items"
						@item-click="handleToolbarItemClick"
					></ToolbarGroups>
				</van-popup>
			</template>
		</template>
	</div>
</template>
<script lang="ts" setup>
import { toolbarPositionProps } from '../toolbar';
import ToolbarItem from './toolbar-item.vue';
import ToolbarGroups from './toolbar-groups.vue';
const props = defineProps(toolbarPositionProps);
const emit = defineEmits(['itemClick']);

const show = ref(false);
const openToolbarUp = () => {
	show.value = true;
};

const handleToolbarItemClick = (tag: string, event: any, logic: any) => {
	show.value = false;
	emit('itemClick', tag, event, logic);
};
</script>
